<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>权限管理</title>
    <meta name="description" content="权限管理">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="assets/js/jquery.min.js"></script>
    <script>
        let name = sessionStorage.getItem("username");
        if (name === null) {
            alert("您还未登录，请登录！");
            window.location.href = "login.html";
        }
    </script>
    <style>
        #form3 label{
        padding-right: 30px;
    }
    #form1 label{
        padding-right: 30px;
    }
    html{
        background-color: #fff;
    }
    </style>
</head>

<body data-type="index">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <div id="personSettings"></div>
        <header class="main_header">

            <!-- 右侧内容 -->
            <div class="tpl-header-fluid">
                <!-- 其它功能-->
                <div class="am-fr tpl-header-navbar">
                    <ul>
                        <!-- 欢迎语 -->
                        <li class="am-text-sm tpl-header-navbar-welcome">
                            <a href="javascript:;">欢迎你, <span id="name"></span> </a>
                        </li>
                        <!--个人设置-->
                        <li class="am-text-sm" data-am-modal="{target: '#settings'}" onclick="settings()">
                            <a href="javascript:;">
                                <span class="am-icon-user"></span> 个人设置
                            </a>
                        </li>

                        <!--退出系统-->
                        <li class="am-text-sm" onclick="exit()">
                            <a href="javascript:;">
                                <span class="am-icon-sign-out"></span> 退出系统
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            <div class="am-panel am-panel-default" id="postId">
                <div class="am-panel-bd" style="display: flex;justify-content: flex-start;align-items: center">

                    <a class="flexMenu" href="user.html">
                        <img src="assets/img/yhgl.png">
                        <p>用户管理</p>
                    </a>
                    
                    <a class="flexMenu" href="shenfen.html">
                        <img src="assets/img/sfgl.png">
                        <p>角色管理</p>
                    </a>
                    <a class="flexMenu menu-bg" href="access.html">
                        <img src="assets/img/access.png">
                        <p>权限管理</p>
                    </a>
                    <a class="flexMenu" href="danwei.html" rules="zuz"> 
                        <img src="assets/img/chuque.png">
                        <p>组织机构</p>
                    </a>
                    <a class="flexMenu " href="data_dictionary.html">
                        <img src="assets/img/sjzd.png">
                        <p>积分项管理</p>
                    </a>
                    <div class="flexMenu" id="backup">
                        <img src="assets/img/backup.png">
                        <p>返回</p>
                    </div>
                </div>
            </div>
            <div class="row-content am-cf bg">
                <div class="widget-head am-cf">
                    <button type="button" class="am-btn am-btn-sm am-radius am-btn-secondary " rules="quan_add" data-am-modal="{target: '#modal1'}">新增</button>
                    <button type="button" class="am-btn am-btn-sm am-radius am-btn-success " rules="quan_bao" id="save">保存</button>
                    <button type="button" class="am-btn am-btn-sm am-radius am-btn-danger " rules="quan_del" id="delete">删除</button>
                </div>
                <div class="row am-cf" style="padding: 0 10%;">
                    <div id="tpl-echarts"></div>
                    <h1 class="am-lg-text-center add">权限管理</h1>
                    <div class="am-u-lg-4 am-u-md-12" style="height: 450px;overflow: auto;">
                        <div>
                            <ul id="treeDemo" class="ztree" style="background-color: #cccccc2e; border-radius: 5px"></ul>
                        </div>
                    </div>
                    <div class="am-u-lg-8 am-u-md-12" style="padding: 0 5%">
                        <form class="am-form am-form-horizontal" style="background-color: #cccccc2e; border-radius: 5px;padding: 5% 0;"
                            id="form1">
                            <input type="hidden" id="treeId" value="">
                          
                            <div class="am-form-group">
                                <label class="am-u-sm-4 am-u-lg-3 am-form-label">名称</label>
                                <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                    <input type="text" id="rule_title" class="am-radius" placeholder="">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-4 am-u-lg-3 am-form-label">定义</label>
                                <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                                    <input type="text" id="rule_name" class="am-radius" placeholder="">
                                </div>
                            </div>
                          
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--模态窗口选择上级节点-->
    <div class="am-modal am-modal-no-btn" tabindex="-1" style="z-index: 1301" id="my-popup">
        <div class="am-modal-dialog" style="width: 400px">
            <div class="am-modal-hd newBuild">
                请选择上级所属组织<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <input type="hidden" id="pname2" value="">
                <input type="hidden" id="pid2" value="">
                <div>
                    <ul id="treeDemo2" class="ztree" style="background-color: #cccccc2e; border-radius: 5px"></ul>
                </div>
                <button id="go" type="submit" class="am-btn am-radius am-btn-danger">确定</button>
                <button class="am-btn am-btn-primary am-radius" data-am-modal-close>取消</button>
            </div>
        </div>
    </div>
    <!--模态窗口提示-->
    <div class="am-modal am-modal-alert " style="z-index: 1302" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd users"></div>
            <div class="am-modal-bd alert">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>

    <!--模态窗口新增-->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="modal1">
        <div class="am-modal-dialog" style="width: 700px">
            <div class="am-modal-hd">
                添加权限
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>
                    x
                    <!-- <img style="max-width:40px;" src="assets/img/modalClose.png"> -->
                    <!-- &times; -->
                </a>
            </div>
            <div class="am-modal-bd">
                <form method="post" enctype="multipart/form-data" class="am-form am-form-horizontal" id="form3">
             
                    <div class="am-form-group">
                        <label class="am-u-sm-4 am-u-lg-3 am-form-label">名称<span class="redStars">*</span></label>
                        <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                            <input type="text" id="rule_title2" class="am-radius" placeholder="">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-4 am-u-lg-3 am-form-label">定义<span class="redStars">*</span></label>
                        <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                            <input type="text" id="rule_name2" class="am-radius" placeholder="">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-4 am-u-lg-3 am-form-label">上级组织<span class="redStars">*</span></label>
                        <div class="am-u-sm-8 am-u-lg-7 am-u-end">
                            <div class="am-input-group">
                                <input type="text" disabled class="am-form-field" id="pname1">
                                <input type="hidden" id="pid1">
                                <span class="am-input-group-btn"><button data-am-modal="{target: '#my-popup'}" id="btn2"
                                        class="am-btn am-btn-secondary" type="button">选择</button></span>
                            </div>
                        </div>
                    </div>
                    <button id="go2" type="submit" class="am-btn am-radius am-btn-danger">确定</button>
                    <button class="am-btn am-radius am-btn-primary" data-am-modal-close>取消</button>
                </form>
            </div>
        </div>
    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="ztree/js/jquery.ztree.all.js"></script>
    <script>
        //确定模态框
        $("#my-alert").on('close.modal.amui', function () {
            window.location.reload();
        });
        let token = sessionStorage.getItem("token");
        var zTreeObj;
        //树节点点击
        function zTreeOnClick(event, treeId, treeNode) {
            //取数据
            $.ajax({
                url: testurl + "/rule/detail",
                headers: { "Authorization": "Bearer " + token },
                contentType: "application/json",
                type: "POST",
                data: JSON.stringify({
                    "id": treeNode.id,
                }),
                success: function (data) {
                    //treeId
                    console.log(data)
                    $("#treeId").val(treeNode.id);
                    $("#rule_name").val(data.obj.name);
                    $("#rule_title").val(data.obj.title);
            
                }
            });

        }


        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [];
        $(document).ready(function () {

            let name = sessionStorage.getItem("realname");



            var setting = {
                callback: {
                    onClick: zTreeOnClick
                }
            };


            //获取树节点
            $.ajax({
                async: false,
                url: testurl + "rule/tree",
                headers: { "Authorization": "Bearer " + token },
                type: "get",
                contentType: "application/json",
                data: {},
                success: function (data) {
                    console.log(data)
                    zNodes = data.obj;
                }
            });
            var setting2 = {
                callback: {
                    onClick: zTreeOnClick2
                }
            };
            //获取点击的name
            function zTreeOnClick2(event, treeId, treeNode) {
                $("#pname2").val(treeNode.name);
                $("#pid2").val(treeNode.id);
            }
            //判断
            $("#btn").click(function () {
                $(".newBuild").attr("value", "");
            });
            $("#btn2").click(function () {
                $(".newBuild").attr("value", "11");
            });
            $("#go").click(function () {

                // if ($("#pname2").attr("value") === "") {
                //     $(".users").html("提示");
                //     $(".alert").html("请选择上级权限！");
                //     $('#my-alert').modal({ target: '#my-alert' });
                // } else {
                    if ($(".newBuild").attr("value") === "11") {
                        $("#pname1").val($("#pname2").attr("value"));
                        $("#pid1").val($("#pid2").attr("value"));
                        $('#my-popup').modal('close');
                    } else {
                        $("#pname").val($("#pname2").attr("value"));
                        $("#pid").val($("#pid2").attr("value"));
                        $('#my-popup').modal('close');
                    }

                // }
            });
            //新增
            $("#go2").click(function () {
                let title = $("#rule_title2").val();
                let name = $("#rule_name2").val();
                let pid1 = $("#pid1").val();
                let str = {
                    "title": title, "name": name, "pid": pid1
                }
                if (title === "" || name === "") {
                    alert("请填写带*必填项！");
                    return false;
                } else {
                    $.ajax({
                        url: testurl + "/rule/add",
                        headers: { "Authorization": "Bearer " + token },
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(str),
                        success: function (data) {
                            if (data.success === true) {
                                $(".users").html("添加权限");
                                $(".alert").html("添加成功！");
                                $('#my-alert').modal({ target: '#my-alert' });
                                $('#modal1').modal('close');
                            } else {
                                $(".users").html("添加权限");
                                $(".alert").html("添加失败！");
                                $('#my-alert').modal({ target: '#my-alert' });
                                $('#modal1').modal('close');
                            }
                        }
                    });
                }
                return false
            });

            //修改
            $("#save").click(function () {

                var treeId = $("#treeId").attr("value");
                if (treeId === "") {
                    $(".users").html("更新权限");
                    $(".alert").html("请选中要更新的权限名称！");
                    $('#my-alert').modal({ target: '#my-alert' });
                    $('#modal1').modal('close');
                } else {
                    let title = $("#rule_title").val();
                    let name = $("#rule_name").val();
                      let pid = $("#pid").val();
                    let str = {
                        "title": title, "name": name, "pid": pid,"id":treeId
                    };
                    $.ajax({
                        url: testurl + "/rule/update",
                        headers: { "Authorization": "Bearer " + token },
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(str),
                        success: function (data) {
                            if (data.success === true) {
                                $(".users").html("更新权限");
                                $(".alert").html("更新成功！");
                                $('#my-alert').modal({ target: '#my-alert' });
                                $('#modal1').modal('close');
                            } else {
                                $(".users").html("更新权限");
                                $(".alert").html("更新失败！");
                                $('#my-alert').modal({ target: '#my-alert' });
                                $('#modal1').modal('close');
                            }
                        }
                    });

                }

            });
            //删除
            $("#delete").click(function () {
                var treeId = $("#treeId").attr("value");
                if (treeId === "") {
                    $(".users").html("删除权限");
                    $(".alert").html("请选中要删除的权限！");
                    $('#my-alert').modal({ target: '#my-alert' });
                    $('#modal1').modal('close');
                } else {
                    if (confirm("确定删除？")) {
                        $.ajax({
                            url: testurl + "/rule/delete",
                            headers: { "Authorization": "Bearer " + token },
                            type: "POST",
                            contentType: "application/json",
                            data: JSON.stringify({
                                "id":treeId
                            }),
                            success: function (data) {
                                if (data.success === true) {
                                    $(".users").html("删除权限");
                                    $(".alert").html("删除成功！");
                                    $('#my-alert').modal({ target: '#my-alert' });
                                    $('#modal1').modal('close');
                                } else {
                                    $(".users").html("删除权限");
                                    $(".alert").html("删除失败！");
                                    $('#my-alert').modal({ target: '#my-alert' });
                                    $('#modal1').modal('close');
                                }
                            }
                        })
                    }

                }
            });
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, JSON.parse(zNodes));
            zTreeObj = $.fn.zTree.init($("#treeDemo2"), setting2, JSON.parse(zNodes));
        });
    </script>
</body>

</html>